import Phaser from 'phaser';
import { polygon } from '../enums';
import { Handler, Card, Diamond } from '../customSprites'
import { Oval } from '../customSprites/Oval';

const { Scene } = Phaser

export class MainScene extends Scene {

    diamondText: Phaser.GameObjects.Text
    handler: Handler
    diamond: number = 50
    leftBorder: number = 60
    rightBorder: number = 860
    downBorder: number = 565
    upBorder: number = 65
    polygons: Phaser.Physics.Arcade.StaticGroup
    ovals: Phaser.Physics.Arcade.Group
    bullets: Phaser.Physics.Arcade.Group

    areas = new Array(5).fill(0).map(() => {
        return new Array(8).fill(0)
    })

    ovalNums = new Array(5).fill(0)

    constructor() {
        super('MainScene');
    }

    create() {
        const map = this.make.tilemap({ key: 'backgroundMap' })
        const tiles = map.addTilesetImage('town', 'townImg')
        const layer = map.createLayer(0, tiles, 0, 0)
        layer?.setScale(1.5, 1.5)

        this.physics.add.sprite(840, 25, 'diamondImg')
        this.diamondText = this.add.text(880, 10, this.diamond.toString())
        this.diamondText.setFontSize(30)
        this.diamondText.setColor('black')

        this.ovals = this.physics.add.group({
            velocityX: -15
        })
        this.polygons = this.physics.add.staticGroup()
        this.bullets = this.physics.add.group({
            velocityX: 100
        })

        new Card(this, 50, 25, polygon.three)
        new Card(this, 100, 25, polygon.four)
        this.handler = new Handler(this)

        this.physics.add.collider(this.ovals, this.polygons, (oval, defender) => {
            oval.food = defender
        })

        this.physics.add.overlap(this.ovals, this.bullets, (oval, bullet) => {
            bullet.destroy()
            oval.health = oval.health - 10
            if (oval.health <= 0) {
                this.ovalNums[oval.row]--
                oval.destroy()
            }
        })

        this.time.addEvent({
            delay: 8000,
            loop: true,
            callback: () => {
                new Diamond(this, Phaser.Math.Between(100, 900), Phaser.Math.Between(80, 520))
            }
        });

        this.time.addEvent({
            delay: 3000,
            loop: true,
            callback: () => {
                const row = Phaser.Math.Between(0, 4)
                const oval = new Oval(this, row, 'circle')
                this.ovals.add(oval)
                this.ovalNums[row]++
            }
        });

        console.log('this', this)
    }

    update(time: number, delta: number): void {

    }

    addDiamond(num: number) {
        this.diamond += num
        this.diamondText.setText(this.diamond.toString())
    }

    subDiamond(num: number) {
        this.diamond -= num
        this.diamondText.setText(this.diamond.toString())
    }

    chooseArea(x: number, y: number) {
        let row = -1
        let col = -1
        let positionX = -1
        let positionY = -1
        if (x < this.leftBorder || x > this.rightBorder || y < this.upBorder || y > this.downBorder) {
            return false
        }

        for (let i = 0; i < 8; i++) {
            if (x >= this.leftBorder + i * 100 && x < this.leftBorder + (i + 1) * 100) {
                col = i
                positionX = this.leftBorder + i * 100 + 50
                break
            }
        }
        for (let i = 0; i < 5; i++) {
            if (y >= this.upBorder + i * 100 && y < this.upBorder + (i + 1) * 100) {
                row = i
                positionY = this.upBorder + i * 100 + 50
                break
            }
        }

        if (this.areas[row][col] === 1) {
            return false
        } else {
            this.areas[row][col] = 1
            return [row, col, positionX, positionY]
        }
    }
}